{extend name="base/base" /}
{block name="main"}
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input searchVal" placeholder="请输入账号或昵称" />
                </div>
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-danger layui-btn-normal adduser_btn">添加</a>
            </div>
        </form>
    </blockquote>
    <table id="usersList" lay-filter="usersList"></table>
    <!--操作-->
    <script type="text/html" id="usersListBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        {{# if(d.uid>1){  }}
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="rule">分类权限</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        {{# } }}
    </script>
</form>
<div id="treeRule" style="display: none;max-height: 500px;">
    <form id="rulForm" class="layui-form layui-form-pane layui-fluid">
        <div class="layui-form-item">
            <div id="tree"></div>
        </div>
        <div class="layui-form-item">
            <input type="hidden" id="groupid" name="groupid" value="">
            <a class="layui-btn center layui-block" lay-submit lay-filter="saveRule">立即提交</a>
        </div>
    </form>
</div>
{/block}
{block name="script"}
{js href="/js/jquery.min.js" /}
{css href="/jstree/themes/default/style.min.css"/}
{js href="/jstree/jstree.js" /}
<script>
triggerTree();

    function triggerTree() {
        $('#tree').jstree({
            'core': {
                'data': {
                    'method': "GET",
                    'url': "{:url('/admin/cateList')}",
                },
            },
            'checkbox': {
                "visible": true,
                "keep_selected_style": true,
                'three_state': false

            },
            'plugins': ['checkbox']
        });

    }
	
    layui.use(['form','layer','table'],function(){
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery, table = layui.table;

        //用户列表
        var tableIns = table.render({
            elem: '#usersList',
            url : "{:url('/admin/userList')}",
            cellMinWidth : 95,
            page : true,
            limit:10,
            limits:[5,10,15,20],
            height : "full-125",
            id:'usersListTable',
            cols : [[
                {field: 'uid', title: 'uid', width:60, align:"center"},
                {field: 'user', title: '账号'},
                {field: 'name', title: '姓名', align:'center'},
                {field: 'title', title: '所属组',  align:'center'},
                {field: 'login_count', title: '登陆次数登陆次数', align:'center'},
                {field: 'last_login_ip', title: '最后登录IP', align:'center'},
                {field: 'last_login_time', title: '最后登陆时间', align:'center'},
                {title: '操作', width:190, templet:'#usersListBar',fixed:"right",align:"center"}
            ]]
        });

        //搜索【此功能需要后台配合，所以暂时没有动态效果演示】
        $(".search_btn").on("click",function(){
            table.reload("usersListTable",{
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    key: $(".searchVal").val()  //搜索的关键字
                }
            })
        });
		
        function tree() {
            var index = layui.layer.open({
                type: 1,
                title: '访问控制',
                //area: '300px',
                //offset: '50px',
                area: ['100%', '90%'],
                offset: '0px',
                content: $('#treeRule').show(),
                end: function () {
                    $('#treeRule').hide();
                }
            })
        }

        //添加用户
        function add(){
            var index = layui.layer.open({
                title : "添加用户",
                type : 2,
                content : "{:url('/admin/edit')}",
                success : function(layero, index){
                    var body = layui.layer.getChildFrame('body', index);
                    setTimeout(function(){
                        layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    },500)
                }
            })
            layui.layer.full(index);
            window.sessionStorage.setItem("index",index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize",function(){
                layui.layer.full(window.sessionStorage.getItem("index"));
            })
        }
        //编辑用户
        function edit(uid){
            var index = layui.layer.open({
                title : "编辑用户",
                type : 2,
                content : "{:url('/admin/edit')}"+'?uid='+uid,
                success : function(layero, index){
                    var body = layui.layer.getChildFrame('body', index);
                    setTimeout(function(){
                        layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    },500)
                }
            })
            layui.layer.full(index);
            window.sessionStorage.setItem("index",index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize",function(){
                layui.layer.full(window.sessionStorage.getItem("index"));
            })
        }

        $(".adduser_btn").click(function(){
            add();
        })

        //列表操作
        table.on('tool(usersList)', function(obj){
            var layEvent = obj.event, data = obj.data;
            if(layEvent === 'edit'){ //编辑
                edit(data.uid);
            }else if (layEvent === 'rule') { //访问控制
                var rules = String(data.cate_ids).split(',');
                var groupid = data.uid;
                $('#tree').jstree("uncheck_all");  //清除所有选中
                $('#tree').jstree('select_node', [rules], true); //选中指定节点
                //$('#tree').jstree().close_all(); //关闭所有节点
                $('#tree').jstree().open_all(); //关闭所有节点
                $('#groupid').val(groupid);
                tree();
            } else if(layEvent === 'del'){ //删除
                layer.confirm('确定删除操作？',{icon:3, title:'提示信息'},function(index){
                    $.post("{:url('/admin/delete')}",{uid:data.uid},function(data){
                        var icon=5;
                        if(data.code){
                            icon=6;
                        }
                        layer.msg(data.msg, {icon:icon,time: 1500}, function () {
                            if(data.code){
                                obj.del();
                            }
                        });
                    })
                });
            }
        });
		
		
        //保存规则
        form.on('submit(saveRule)', function (data) {
            var index = layer.msg('修改中，请稍后', {icon: 16, time: false, shade: 0.8});
            setTimeout(function () {
                layer.close(index);
                var rules = $("#tree").jstree("get_checked");
                var id = $('#groupid').val();
                $.post("{:url('/admin/editCate')}", {rules: rules, id: id}, function (data) {
                    var icon = 5;
                    if (data.code) {
                        icon = 6;
                    }
                    layer.msg(data.msg, {icon: icon, time: 1500}, function () {
                        if (data.code) {
                            tableIns.reload();
                            layui.layer.closeAll();
                        }
                    });
                });
            }, 500);
        });

    })
</script>
{/block}
